<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>架位绑定系统</title>
    <script src="js\Jquery3.1.1.js"></script>
    <script src="layui/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="layui/lay/modules/layer.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/>
    <style>

    </style>
</head>
<body style="background-color: #2C3E50">
<div style="position: absolute;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center">
    <div style="border: solid black 1px;padding: 10px;padding-right: 10%;padding-left: 10%;padding-bottom:0;background-color: white;height: 60%">
        <div id="bigMsg" style="width: 100%;font-size: 30px;text-align: center;margin-bottom: 40px;">准备就绪</div>
        <form class="layui-form" action="" style="margin: 20px 0">
            <div class="layui-form-item">
                <label class="layui-form-label">书架号</label>
                <div class="layui-input-block">
                    <select id="shujiahao" name="shujiahao" lay-verify="required">
                        <option value="1号书架A面">1号书架A面</option>
                        <option value="1号书架B面">1号书架B面</option>
                        <option value="2号书架A面">2号书架A面</option>
                        <option value="2号书架B面">2号书架B面</option>
                        <option value="3号书架A面">3号书架A面</option>
                        <option value="3号书架B面">3号书架B面</option>
                        <option value="4号书架A面">4号书架A面</option>
                        <option value="4号书架B面">4号书架B面</option>
                        <option value="5号书架A面">5号书架A面</option>
                        <option value="5号书架B面">5号书架B面</option>
                        <option value="6号书架A面">6号书架A面</option>
                        <option value="6号书架B面">6号书架B面</option>
                        <option value="7号书架A面">7号书架A面</option>
                        <option value="7号书架B面">7号书架B面</option>
                        <option value="8号书架A面">8号书架A面</option>
                        <option value="8号书架B面">8号书架B面</option>
                        <option value="9号书架A面">9号书架A面</option>
                        <option value="9号书架B面">9号书架B面</option>
                        <option value="10号书架A面">10号书架A面</option>
                        <option value="10号书架B面">10号书架B面</option>
                        <option value="11号书架A面">11号书架A面</option>
                        <option value="11号书架B面">11号书架B面</option>
                        <option value="12号书架A面">12号书架A面</option>
                        <option value="12号书架B面">12号书架B面</option>
                        <option value="13号书架A面">13号书架A面</option>
                        <option value="13号书架B面">13号书架B面</option>
                        <option value="14号书架A面">14号书架A面</option>
                        <option value="14号书架B面">14号书架B面</option>
                        <option value="15号书架A面">15号书架A面</option>
                        <option value="15号书架B面">15号书架B面</option>
                        <option value="16号书架A面">16号书架A面</option>
                        <option value="16号书架B面">16号书架B面</option>
                        <option value="17号书架A面">17号书架A面</option>
                        <option value="17号书架B面">17号书架B面</option>
                        <option value="18号书架A面">18号书架A面</option>
                        <option value="18号书架B面">18号书架B面</option>
                        <option value="19号书架A面">19号书架A面</option>
                        <option value="19号书架B面">19号书架B面</option>
                        <option value="20号书架A面">20号书架A面</option>
                        <option value="20号书架B面">20号书架B面</option>
                        <option value="21号书架A面">21号书架A面</option>
                        <option value="21号书架B面">21号书架B面</option>
                        <option value="22号书架A面">22号书架A面</option>
                        <option value="22号书架B面">22号书架B面</option>
                        <option value="23号书架A面">23号书架A面</option>
                        <option value="23号书架B面">23号书架B面</option>
                        <option value="24号书架A面">24号书架A面</option>
                        <option value="24号书架B面">24号书架B面</option>
                        <option value="25号书架A面">25号书架A面</option>
                        <option value="25号书架B面">25号书架B面</option>
                        <option value="26号书架A面">26号书架A面</option>
                        <option value="26号书架B面">26号书架B面</option>
                        <option value="27号书架A面">27号书架A面</option>
                        <option value="27号书架B面">27号书架B面</option>
                        <option value="28号书架A面">28号书架A面</option>
                        <option value="28号书架B面">28号书架B面</option>
                        <option value="29号书架A面">29号书架A面</option>
                        <option value="29号书架B面">29号书架B面</option>
                        <option value="30号书架A面">30号书架A面</option>
                        <option value="30号书架B面">30号书架B面</option>
                        <!---->
                        <option value="班级漂流A面">班级漂流A面</option>
                        <option value="楼道书吧A面">楼道书吧A面</option>
                        <option value="阅览室A面">阅览室A面</option>
                        <option value="心理咨询室A面">心理咨询室A面</option>

                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">层位号</label>
                <div class="layui-input-block">
                    <select id="cengweihao" name="cengweihao" lay-verify="required">
                        <option value="1层">1层</option>
                        <option value="2层">2层</option>
                        <option value="3层">3层</option>
                        <option value="4层">4层</option>
                        <option value="5层">5层</option>
                        <option value="6层">6层</option>
                        <option value="7层">7层</option>
                        <option value="8层">8层</option>
                        <option value="9层">9层</option>
                        <option value="10层">10层</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">列位号</label>
                <div class="layui-input-block">
                    <select id="lieweihao" name="lieweihao" lay-verify="required">
                        <option value="1列">1列</option>
                        <option value="2列">2列</option>
                        <option value="3列">3列</option>
                        <option value="4列">4列</option>
                        <option value="5列">5列</option>
                        <option value="6列">6列</option>
                        <option value="7列">7列</option>
                        <option value="8列">8列</option>
                        <option value="9列">9列</option>
                        <option value="10列">10列</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">位置码</label>
                <div class="layui-input-block">
                    <input id="weizhima" type="text" name="title" required lay-verify="required" placeholder="请输入位置码"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">RFID</label>
                <div class="layui-input-block">
                    <input disabled="disabled" id="rfid" type="text" name="title" required lay-verify="required"
                           placeholder="请放书" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">条形码</label>
                <div class="layui-input-block">
                    <input id="code" type="text" name="title" required lay-verify="required" placeholder="请扫描"
                           autocomplete="off" class="layui-input">
                </div>
            </div>
        </form>
        <div style="width: 100%;margin-top: 40px;display: flex;justify-content: space-between">
            <button id="btnStart" class="layui-btn layui-btn-disabled">开始</button>
            <button id="btnStop" class="layui-btn layui-btn-danger layui-btn-disabled">停止</button>
        </div>
    </div>
    <div style="position:absolute;bottom: 0;border-top: solid black 1px;width: 100%;background-color: white;padding: 40px 0"
         id="statusLine;">
        <div style="display: flex;justify-content: space-around;font-size: 20px">
            <div>本格绑定数：<span id="thisCount">0</span></div>
            <div>今天绑定数：<span id="todayCount"></span></div>
            <div>总绑定数：<span id="allCoutn"></span></div>
            <div>消息：<span id="message">连接成功</span></div>
            <div>连接状态：<span id="connectionStatus"></span></div>
        </div>
    </div>
</div>
<audio id="player1">
    <source src="http://zjlt.sc.chinaz.com/files/download/sound1/201403/4204.mp3"/>
</audio>
<audio id="player2">
    <source src="http://zjlt.sc.chinaz.com/Files/DownLoad/sound1/201611/8023.mp3"/>
</audio>
<script>
    $("#btnStart").click(function () {
        var index;
        $.ajax({
            url: 'startImportBook',
            beforeSend: function () {
                index = layer.load(2, {shade: false});
            },
            success: function (res) {
                if (res.code == 0) {
                    $("#thisCount").html("0");
                    $("#btnStart").addClass("layui-btn-disabled");
                    $("#btnStop").removeClass("layui-btn-disabled");
                    $("#shujiahao").attr("disabled", "disabled");
                    $("#cengweihao").attr("disabled", "disabled");
                    $("#lieweihao").attr("disabled", "disabled");
                    $("#weizhima").attr("disabled", "disabled");
                    layui.use('form', function () {
                        var form = layui.form;
                        form.render();
                    });
                    layer.close(index);
                    $("#code").focus();
                    $("#bigMsg").html("请扫码");
                    $("#bigMsg").css("color", "red");
                    $("#thisCount").html("0");
                }
            },
            async: true
        });
    });
    $("#btnStop").click(function () {
        var index;
        $.ajax({
            url: 'thisCountSet0',
            beforeSend: function () {
                index = layer.load(2, {shade: false});
            },
            success: function (res) {
                if (res.code == 0) {
                    $("#thisCount").html("0");
                    $("#btnStop").addClass("layui-btn-disabled");
                    $("#btnStart").removeClass("layui-btn-disabled");
                    $("#shujiahao").removeAttr("disabled");
                    $("#cengweihao").removeAttr("disabled");
                    $("#lieweihao").removeAttr("disabled");
                    $("#weizhima").removeAttr("disabled");
                    layui.use('form', function () {
                        var form = layui.form;
                        form.render();
                    });
                    layer.close(index);
                    $("#code").val("");
                    $("#rfid").val("");
                    $("#bigMsg").html("准备就绪");
                    $("#bigMsg").css("color", "#000");
                }
            },
            async: true
        });
    });
</script>
<script>
    var ip = "";
    var port = "";
    $.ajax({
        url: 'getIPandPort',
        async: false,
        success: function (res) {
            console.log(res);
            port = res.port;
            ip = res.ip;
        }
    });
    var ws = new WebSocket("ws://" + ip + ":" + port + "/sokect");
    ws.onopen = function () {
        console.log("连接成功")
        $("#connectionStatus").html("连接成功");
        $("#btnStart").removeClass("layui-btn-disabled");
    }
    ws.onmessage = function (evt) {
        var msg = JSON.parse(evt.data);
        console.log(msg);
        if (msg.from == "importBook") {
            $("#rfid").val("");
            $("#rfid").val(msg.sUid);
            $("#code").val("");
            $("#code").focus();
        }
    };
    ws.onclose = function () {
        console.log("连接已关闭...");
        $("#connectionStatus").html("断开连接");
        $("#bigMsg").html("断开连接");
        $(".layui-btn").addClass("layui-btn-disabled");
    };
</script>
<script>
    $("#code").keypress(function (e) {
        if (e.which == 13) {
            if ($("#code").val().length == 7 && $("#rfid").val().length == 16) {
                $.ajax({
                    url: 'insertShujiaBangding',
                    async: false,
                    data: {
                        rfid: $("#rfid").val(),
                        weizhima: $("#weizhima").val(),
                        shujiahao: $("#shujiahao").val(),
                        cengweihao: $("#cengweihao").val(),
                        lieweihao: $("#lieweihao").val(),
                        code: $("#code").val()
                    },
                    success: function (res) {
                        console.log(res);
                        if (res.statusCode == -1) {
                            $("#message").css("color", "red");
                            var player = $("#player2")[0];
                            /*jquery对象转换成js对象*/
                            player.play();
                            /*播放*/
                            layer.alert(res.message);
                        }
                        if (res.statusCode == 0) {
                            $("#message").css("color", "#008B00");
                            var player = $("#player1")[0];
                            /*jquery对象转换成js对象*/
                            player.play();
                            /*播放*/
                            $("#thisCount").html(Number($("#thisCount").html()) + 1);
                        }
                        $("#rfid").val("请放书");
                        $("#code").val("请扫码");
                        $("#code").focus();
                        $("#bigMsg").html("请放书");
                        $("#bigMsg").css("color", "red");
                        $("#message").html(res.message);
                        $("#allCoutn").html(res.allCoutn);
                        // $("#thisCount").html(res.thisCount);
                        $("#todayCount").html(res.todayCount);

                    }
                });
            } else {
                $("#message").css("color", "red");
                $("#message").html("条形码或者RFID格式错误！");
                var player = $("#player2")[0];
                /*jquery对象转换成js对象*/
                player.play();
                /*播放*/
                layer.alert("条形码或者RFID格式错误！");
            }
        }
    });
</script>

<script>
    // $.ajax({
    //     url: 'getBangDingCoutn',
    //     async: false,
    //     success:function (res) {
    //         $("#allCoutn").html(res.allCoutn);
    //         $("#thisCount").html(res.thisCount);
    //         $("#todayCount").html(res.todayCount);
    //     }
    // });

</script>
<script>
    //Demo
    layui.use('form', function () {
        var form = layui.form;
        form.render();
    });
</script>
<script>
    $("#shujiahao").change(function () {
        $("#code").focus();
    })
    $("#cengweihao").change(function () {
        $("#code").focus();
    })
    $("#lieweihao").change(function () {
        $("#code").focus();
    })
    $("#weizhima").change(function () {
        $("#code").focus();
    })
</script>
</body>
</html>